<template>
	<view class="">
		<view class="menu-item" @click="$emit('Click')">
			<view class="header">
				<view>标题：<span class="business">{{item.title}}</span></view>
				<view class="type-text">{{dictList.find(v=>v.dictValue==item.typeId).dictLabel}}</view>
			</view>
			<view class="content">
				<view>办理人：{{item.name}}</view>
				<view class="appointTime">{{item.appointTime}}</view>
			</view>
			<view class="intro">
				<view>{{item.content}}</view>
				<view v-if="item.status==1&&item.isEvaluate==0&&setUpForm.state">
					<u-button type="success" size="mini" plain @click="show=true">评论</u-button>
				</view>
				<view v-if="item.status==1&&item.isEvaluate!=0">
					<u-button type="success" size="mini" plain @click="findEvaluate(item.id)">查看评论</u-button>
				</view>
				<view v-if="item.status==0">
					<u-button type="error" size="mini" plain @click="$emit('cancle',item.id)">取消</u-button>
				</view>
			</view>
		</view>
		<u-popup class="" v-model="show" mode="bottom" border-radius="15" height="500rpx" :mask="false">
			<view class="container">
				<u-rate :count="setUpForm.starNumber" v-model="score" :disabled='isRead'
					style="padding-bottom: 40rpx"></u-rate>
				<u-input type="textarea" v-model="appraise" :disabled='isRead' height="150" :auto-height="true"
					border />
				<view class="confrim-btn" v-if="!isRead">
					<u-button type="primary" @click="handleClick">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				dictList: [],
				show: false,
				score: null,
				appraise: '',
				isRead: false,
				customStyle: {
					padding: '40rpx'
				},
				setUpForm: {}
			}
		},
		watch: {
			item() {
				this.getEvaluate()
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {},
		onLoad(options) {},
		created() {
			this.findDict()
			this.getEvaluate()
		},
		methods: {
			async getEvaluate() {
				let res = await this.$api.getEvaluation({
					typeId: 'jiaohaoxitong'
				})
				console.log('res', res)
				if (!!res.rows.length) {
					this.setUpForm = res.rows[0]
					this.setUpForm.state = !(res.rows[0].state * 1)
				}
			},
			async handleClick() {
				let ret = await this.$api.addEvaluate({
					orderId: this.item.id,
					content: this.appraise,
					score: this.score,
					userId: this.$s.get('userId'),
					userName: this.$s.get('userInfo').userName,
					workerId: this.item.jobUserId,
					workerName: this.item.jobUserName
				})
				if (ret.code == 200) {
					this.$msg.default('评论成功！')
					this.show = false
					this.$emit('resetting')
				}
			},
			// 查看评论
			findEvaluate(id) {
				this.$api.listEvaluate({
					orderId: id,
					userId: this.$s.get('userId'),
				}).then(res => {
					if (res.rows[0]) {
						this.isRead = true
						this.appraise = res.rows[0].content
						this.score = res.rows[0].score
						this.show = true
					}
				})
			},
			async findDict() {
				let res = await this.$api.getTypeList('yylx_jh')
				console.log('办理类型', res);
				if (res.data) {
					this.dictList = res.data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.menu-item {
		background-color: #fff;
		padding: 40rpx;
		border: 2rpx solid #eaeaea;
		border-radius: 25rpx;
		margin: 20rpx 30rpx 0;

		.business {
			font-weight: 700;
		}

		.header {
			display: flex;
			justify-content: space-between;
		}

		.content {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;

			.appointTime {
				font-weight: 700;
				font-size: 24rpx;
				color: #6c6c6c;
			}
		}

		.intro {
			color: #6c6c6c;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}

	.container {
		padding: 40rpx;

		.confrim-btn {
			margin-top: 40rpx;
		}
	}

	.type-text {
		color: #00aaff;
	}
</style>